<template>
	<view class="bd feed-has-tag">
        
        <view class="timeline">
            <view class="inn">
                
				<view v-for="(item, index) in jdata" :key="index" >
					<view v-if="item.type == 0" class="feed-item">
						<!-- 圆点 -->
						<view class="circle circle-orange"></view>
						<view class="feed-detail">
							<view class="date">
								<view class="status-tag  m-icon-bg1 dt-tag">动态</view>
								<p>{{item.date}}</p>
							</view>
							<view class="title">{{item.name}}</view>
							<view class="content">
								<p>{{item.content}}</p>
							</view>
						</view>
					</view>

					<view v-if="item.type == 1" class="feed-item">
						<view class="circle circle-green"></view>
						<view class="feed-detail">
							<view class="date">
								<view class="status-tag m-icon-bg1 kp-tag">{{item.name}}</view>
								<p>{{item.date}}</p>
							</view>
							<view class="title">测试动态: <span>{{item.date}}</span> </view>
						</view>
					</view>

					<view v-if="item.type == 2" class="feed-item">
						<view class="circle circle-pink"></view>
						<view class="feed-detail">
							<view class="date">
								<view class="status-tag m-icon-bg1 jf-tag">{{item.name}}</view>
								<p>{{item.date}}</p>
							</view>
							<view class="title">预计交房时间: <span>{{item.date}}</span> </view>
							<view class="content">
								<p>{{item.content}}</p>
							</view>
						</view>
					</view>

					<view v-if="item.type == 3" class="feed-item">
						<view class="circle circle-blur"></view>
						<view class="feed-detail">
							<view class="date">
								<view class="status-tag m-icon-bg1 zj-tag">{{item.name}}</view>
								<p>{{item.date}}</p>
							</view>
							<view class="title">{{item.name}}</view>
							<view class="content">
								<p>发证日期: <span>{{item.date}}</span></p>
							</view>
						</view>
					</view>
				</view>

            </view>
        </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			jdata:{
				// type: Array,
				required: true,
			}
		},
		
		methods: {
			
		}
	}
</script>

<style scoped>
    .bd{
        margin: 0 40rpx 0 40rpx;
    }
    .timeline{
        width: 670rpx;
        /* height: 730rpx; */
        margin-bottom: 40rpx;
        /* border: 1px solid #000; */
    }
    .inn{
        width: 662rpx;
        /* height: 730rpx; */
        border-left: 1px solid #ecf0f4;
        margin-left: 6rpx;
    }
    .feed-item{
        height: 150rpx;
        width: 660rpx;
        margin-bottom: 40rpx;
        /* border:1px solid #ff9f24; */
    }
    .circle{
        height: 15rpx;
        width: 15rpx;
        /* margin-left: -.35rem; */
        border-radius: 50%;
        float: left;
        position: relative;
        left: -7rpx;
        top: -7rpx;
    }
    .circle-orange , .dt-tag{
         background: #ff9f24;
    }
    .circle-green , .kp-tag{
        background: #8cd13f;
    }
    .circle-pink , .jf-tag{
        background: #f86280;
    }
    .circle-blur , .zj-tag{
        background: #639ef6;
    }

    .feed-detail{
        height: 152rpx;
        width: 640rpx;
        /* border:1px solid red; */
        margin-left: 20rpx;
    }

    .date{
        width: 640rpx;
        height: 38rpx;
    }
    .status-tag{
        height:38rpx;
        width:72rpx;
       border-radius: 10rpx 0 14rpx 0;
       text-align: center;
       line-height: 38rpx;
       color: #fff;
       font-size: 24rpx;
       float: left;
       margin-right: 20rpx;
    }


    .date>p{
        color: #77808a;
        font-size: 24rpx;

    }
    .title{
        color: #3e4a59;
        font-size: 32rpx;
        font-weight: 550;
        margin: 20rpx 0 4rpx 0;
    }
    .title>span{
        margin-left: 20rpx;
    }

    .content>P{
        width: 600rpx;
        overflow: hidden; 
        white-space: nowrap; 
        text-overflow: ellipsis; 
    }
    .content>P>span{
        margin-left: 20rpx;
    }
    
</style>
